<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container" v-if="seeFlag=='0'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-page-header class="title-row" @back="goCenter" content="版本管理"></el-page-header>
          <br />
        </div>
        <el-button size="mini" type="primary"  @click="toDeffer">参数对比</el-button>
        <div class="head-container">
            <crudOperation :permission="permission"/>
        </div>
        <el-table :data="crud.data" ref="table" style="margin-top:10px" v-loading="crud.loading">
            <el-table-column type="index" width="55"/>
            <el-table-column label="集群" prop="cmName" />
            <el-table-column label="基线名称" prop="message" />
            <el-table-column label="采集时间" prop="createTime" />
            <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="paramView(scope.row)">参数查看</el-button>
                  <el-button size="mini" type="text" @click="openAdd(scope.row)">添加基线</el-button>
                  <el-button size="mini" type="text" @click="delLine(scope.row)">删除基线</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
          :close-on-click-modal="false"
          :before-close="handleClose"
          :visible.sync="lineFlag"
          title="新增基线"
          width="800px"
        >
        <el-form :inline="true" label-width="120px" :model="baseLine">
            <el-form-item label="集群">
                <el-input v-model="baseLine.cmName" disabled></el-input>
            </el-form-item>
            <el-form-item label="子集群">
                <el-input v-model="baseLine.clusterName" disabled></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-input v-model="baseLine.createTime" disabled></el-input>
            </el-form-item>
            <el-form-item label="基线标识">
                <el-input v-model="baseLine.message" placeholder="请输入基线标识"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="addLine">确 定</el-button>
        </div>
        </el-dialog>
      </el-card>
    </div>
    <parameter-see v-if="seeFlag=='1'" @changeSee="changeSee" :paramData="paramData" />
    <deff v-if="seeFlag=='2'" :defferData="defferData" @center='center' />
  </div>
</template>
<script>
  import parameterSee from './parameterSee.vue';
  import deff from './deffer.vue';
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import parameter from '@/api/phaseTwo/parameter.js'
  const defaultCrud = CRUD({
    title: '版本管理',
    url: 'monitor_api/cmServiceParam/selHistoryVersion'
  })
  export default {
    components:{parameterSee,deff,crudOperation, rrOperation, udOperation },
    mixins: [presenter(defaultCrud), header(), crud()],
    props: ['tableData'],
    data() {
      return {
        permission:{},
        lineFlag:false,
        baseLine:{},
        activeName:'1',
        seeFlag:'0',
        paramData:{},
        defferData:{},
      };
    },
    watch:{
      'tableData' (val,old) {
        this.query.cmFlag = this.tableData.cmFlag
        this.query.clusterFlag = this.tableData.clusterFlag
        this.crud.refresh()
      }
    },
    created(){
        this.query.cmFlag = this.tableData.cmFlag
        this.query.clusterFlag = this.tableData.clusterFlag
    },
    methods:{
      goCenter() {
        this.$emit("center",'0')
      },
      openAdd(row){
          this.baseLine=row
          this.lineFlag=true
      },
      addLine(){
        let obj={cmFlag:this.baseLine.cmFlag,clusterFlag:this.baseLine.clusterFlag,createDate:this.baseLine.createTime,message:this.baseLine.message,jxFlag:'0'}
        parameter.saveLine(obj).then((res)=>{
          this.lineFlag=false
          this.crud.refresh()
        })
      },
      handleClose(){
          this.lineFlag=false
          this.baseLine={}
      },
      delLine(row){
        this.$confirm('确认删除此条基线吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            
            type: 'warning'
        }).then(()=>{
            let obj={cmFlag:row.cmFlag,clusterFlag:row.clusterFlag,createDate:row.createTime,message:'',jxFlag:'1'}
            parameter.saveLine(obj).then((res)=>{
              this.crud.refresh()
            })
        })
      },
      changeSee(val){
        this.seeFlag=val
      },
      center(val){
        this.seeFlag=val
      },
      paramView(row){
        this.seeFlag='1'
        this.paramData=row
      },
      toDeffer(){
        this.defferData=this.tableData
        this.seeFlag='2'
      }
    }
  }
</script>
